<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - AgriShare</title>
    <link rel="stylesheet" href="css/auth.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="auth-container">
        <div class="auth-card">
            <div class="auth-header">
                <div class="logo">
                    <i class="fas fa-seedling"></i>
                    <span>AgriShare</span>
                </div>
                <h2>加入我们</h2>
                <p>创建您的账户，开始分享农业知识</p>
            </div>
            
            <form class="auth-form" id="registerForm">
                <div class="form-row">
                    <div class="form-group">
                        <label for="firstName">姓</label>
                        <div class="input-group">
                            <i class="fas fa-user"></i>
                            <input type="text" id="firstName" name="firstName" required>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="lastName">名</label>
                        <div class="input-group">
                            <i class="fas fa-user"></i>
                            <input type="text" id="lastName" name="lastName" required>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="username">用户名</label>
                    <div class="input-group">
                        <i class="fas fa-at"></i>
                        <input type="text" id="username" name="username" required>
                        <div class="input-feedback" id="usernameFeedback"></div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="email">邮箱地址</label>
                    <div class="input-group">
                        <i class="fas fa-envelope"></i>
                        <input type="email" id="email" name="email" required>
                        <div class="input-feedback" id="emailFeedback"></div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="phone">手机号码</label>
                    <div class="input-group">
                        <i class="fas fa-phone"></i>
                        <input type="tel" id="phone" name="phone" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="profession">职业/专业领域</label>
                    <div class="input-group">
                        <i class="fas fa-briefcase"></i>
                        <select id="profession" name="profession" required>
                            <option value="">请选择您的专业领域</option>
                            <option value="farmer">农民/种植户</option>
                            <option value="breeder">养殖户</option>
                            <option value="researcher">农业研究员</option>
                            <option value="expert">农业专家</option>
                            <option value="student">农业学生</option>
                            <option value="technician">农业技术员</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="password">密码</label>
                    <div class="input-group">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="password" name="password" required>
                        <button type="button" class="toggle-password">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                    <div class="password-strength" id="passwordStrength">
                        <div class="strength-bar">
                            <div class="strength-fill"></div>
                        </div>
                        <span class="strength-text">密码强度</span>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="confirmPassword">确认密码</label>
                    <div class="input-group">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="confirmPassword" name="confirmPassword" required>
                        <div class="input-feedback" id="confirmPasswordFeedback"></div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="checkbox">
                        <input type="checkbox" name="terms" required>
                        <span class="checkmark"></span>
                        我同意 <a href="#" class="link">用户协议</a> 和 <a href="#" class="link">隐私政策</a>
                    </label>
                </div>
                
                <div class="form-group">
                    <label class="checkbox">
                        <input type="checkbox" name="newsletter">
                        <span class="checkmark"></span>
                        订阅农业资讯和技术更新
                    </label>
                </div>
                
                <button type="submit" class="btn-submit">
                    <span>创建账户</span>
                    <i class="fas fa-arrow-right"></i>
                </button>
            </form>
            
            <div class="auth-footer">
                <p>已有账户？ <a href="login.html">立即登录</a></p>
                <div class="divider">
                    <span>或</span>
                </div>
                <div class="social-login">
                    <button class="social-btn google">
                        <i class="fab fa-google"></i>
                        使用Google注册
                    </button>
                    <button class="social-btn wechat">
                        <i class="fab fa-weixin"></i>
                        使用微信注册
                    </button>
                </div>
            </div>
        </div>
        
        <div class="auth-bg">
            <div class="bg-content">
                <h3>开启农业知识分享之旅</h3>
                <p>加入AgriShare社区，与全国农业专家和爱好者一起分享经验，学习新技术</p>
                <div class="features">
                    <div class="feature">
                        <i class="fas fa-graduation-cap"></i>
                        <span>专业学习</span>
                    </div>
                    <div class="feature">
                        <i class="fas fa-users"></i>
                        <span>社区交流</span>
                    </div>
                    <div class="feature">
                        <i class="fas fa-medal"></i>
                        <span>专家认证</span>
                    </div>
                </div>
                <div class="testimonial">
                    <blockquote>
                        "AgriShare让我学到了很多实用的农业技术，真正帮助我提高了产量。"
                    </blockquote>
                    <cite>- 张农民，山东</cite>
                </div>
            </div>
        </div>
    </div>
    
    <script src="js/auth.js"></script>
</body>
</html>